<template>
  <div class="app-container">
    <van-search
      v-model="inputSearch"
      show-action
      :placeholder="$t('form.formData.fullTextSearch')"
      @search="handleInputSearchChange"
    >
      <template #action>
        <div @click="handleInputSearchChange">{{ $t("form.formData.query") }}</div>
      </template>
    </van-search>
    <div class="mb20 mt20">
      <el-button
        size="small"
        v-if="checkBtnPerms('add')"
        icon="ele-Plus"
        type="primary"
        @click="handleAdd"
      >
        {{ $t("form.formData.add") }}
      </el-button>
      <el-button
        size="small"
        v-if="checkBtnPerms('query')"
        icon="ele-Search"
        type="primary"
        @click="handleQuery"
      >
        {{ $t("form.formData.query") }}
      </el-button>
      <el-button
        size="small"
        v-if="checkBtnPerms('delete')"
        icon="ele-Remove"
        type="danger"
        @click="handleDelete"
      >
        {{ $t("form.formData.delete") }}
      </el-button>
      <el-button
        size="small"
        icon="ele-Delete"
        v-if="checkBtnPerms('delete')"
        type="danger"
        @click="handleOpenDataRecycle"
      >
        {{ $t("form.formData.recycle") }}
      </el-button>
    </div>
    <base-table
      ref="baseTableRef"
      :grid-options="gridOptions"
      @cell-click="handleViewOrUpdate"
      @cell-menu="cellContextMenuEvent"
      @menu-click="contextMenuClickEvent"
    ></base-table>

    <ViewOrUpdate
      v-if="formModel && formKey"
      ref="viewOrUpdateDialogRef"
      :can-update="checkBtnPerms('update')"
      :fields="fields"
      :fixed-fields="fixedFields"
      :form-key="formKey"
      @reload="handleReloadTable"
      @open-reply="$refs.replyDrawerRef.open()"
    />
    <el-dialog
      v-model="addDialogVisible"
      v-if="addDialogVisible"
      :close-on-click-modal="false"
      :title="$t('form.formData.add')"
      width="60%"
    >
      <el-scrollbar
        height="750px"
        class="t-form-theme-wrap"
      >
        <biz-project-form
          v-if="formConfig.formKey"
          :form-config="formConfig"
          @submit="submitForm"
        />
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">{{ $t("formI18n.all.cancel") }}</el-button>
        </div>
      </template>
    </el-dialog>
    <van-popup
      v-model:show="queryDialogVisible"
      position="bottom"
      :closeable="true"
      :title="$t('form.formData.query')"
      :style="{ height: '90%' }"
    >
      <div class="filter-title">
        {{ $t("form.formData.query") }}
      </div>
      <data-filter
        class="mt20"
        :fields="fields"
        :form-key="formKey"
        :show-quick-filter="true"
        @filter="
          params => {
            queryParams.filter = params;
          }
        "
      />
      <div class="filter-footer-wrap">
        <div class="filter-footer">
          <el-button
            size="default"
            @click="queryDialogVisible = false"
          >
            {{ $t("formI18n.all.cancel") }}
          </el-button>
          <el-button
            type="primary"
            size="default"
            @click="handleConditionQueryTable"
          >
            {{ $t("formI18n.all.confirm") }}
          </el-button>
        </div>
      </div>
    </van-popup>
    <data-import
      ref="dataImportRef"
      :form-key="formKey"
      @success="handleReloadTable"
    />
    <export-data
      ref="dataExportRef"
      :export-field-list="fields"
    />
    <reply-drawer
      ref="replyDrawerRef"
      :data-id="selectDataId"
      :form-key="formKey"
    />
    <download-file
      ref="downloadFileRef"
      :fields="fields"
      :query-params="queryParams"
    />
    <data-recycle
      :form-key="formKey"
      :columns="gridOptions?.columns"
      v-if="gridOptions.columns"
      ref="dataRecycleRef"
      @refresh="handleReloadTable"
    />
  </div>
</template>

<script name="DataIndex" setup>
import { provide } from "vue";
import ViewOrUpdate from "./ViewOrUpdate.vue";
import BaseTable from "../table/BaseTable.vue";

const DataFilter = loadAsyncComponent(() => import("../filter/index.vue"));
const BizProjectForm = loadAsyncComponent(() => import("@/views/formgen/components/BizProjectForm/index.vue"));
const ReplyDrawer = loadAsyncComponent(() => import("../ReplyDrawer.vue"));
const DownloadFile = loadAsyncComponent(() => import("../table/DownloadFile.vue"));
const ExportData = loadAsyncComponent(() => import("../table/ExportData.vue"));
const DataRecycle = loadAsyncComponent(() => import("../table/DataRecycle.vue"));
const DataImport = loadAsyncComponent(() => import("../table/import.vue"));
import { loadAsyncComponent } from "@/utils/asyncComponent";
import { formDataTableProps, useFormDataTable } from "@/views/form/data/table/useFormDataTable";

const props = defineProps({
  ...formDataTableProps
});

const {
  formKey,
  formConfig,
  formModel,
  queryParams,
  queryDialogVisible,
  addDialogVisible,
  selectDataId,
  checkboxIds,
  fields,
  fixedFields,
  inputSearch,
  handleConditionQueryTable,
  handleQuery,
  dataImportRef,
  handleImport,
  baseTableRef,
  dataExportRef,
  handleExport,
  downloadFileRef,
  handleDownload,
  handleExamAssignScore,
  dataRecycleRef,
  handleOpenDataRecycle,
  printTemplateListRef,
  handleBatchPrint,
  handleDelete,
  handleAdd,
  handleReloadTable,
  gridOptions,
  cellContextMenuEvent,
  viewOrUpdateDialogRef,
  handleViewOrUpdate,
  contextMenuClickEvent,
  submitForm,
  handleInputSearchChange,
  checkBtnPerms,
  formLogicData,
  dimensionConfig,
  formType
} = useFormDataTable(props, {
  toolbarConfig: {
    enabled: false,
    refresh: false,
    import: false,
    print: false,
    zoom: false,
    custom: false,
    slots: {
      buttons: "toolbar_buttons",
      tools: "toolbar_tools"
    }
  }
});

provide("checkBtnPerms", checkBtnPerms);
provide("formLogicData", formLogicData);
provide("dimensionConfig", dimensionConfig);

defineExpose({
  checkBtnPerms
});
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
}

:deep(.project-form) {
  background-color: #ffffff !important;
  width: 100% !important;
}

/*// 使用样式隐藏最后一行无用设置
*/
:deep(.vxe-export--panel tr:last-child) {
  display: none !important;
}

:deep(.vxe-tools--operate button:first-child) {
  display: none !important;
}

@media screen and (max-width: 500px) {
  :deep(.vxe-pager) {
    height: 100%;
    padding-bottom: 10px;
    padding-top: 5px;

    .vxe-pager--sizes {
      margin-top: 5px;
    }
  }
  :deep(.vxe-modal--box) {
    width: 100% !important;
  }
  :deep(.el-dialog__wrapper .el-dialog) {
    width: 100% !important;
  }
  :deep(.vxe-toolbar) {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
    height: 100px;

    &:last-child .el-button {
      margin-left: 0;
    }

    .vxe-toolbar {
      margin-top: 10px;
    }
  }
}

.fixed-col-wrap {
  white-space: nowrap;
  overflow: hidden;

  .el-checkbox {
    display: block !important; /* 每个复选框一行显示 */
    overflow: hidden; /* 隐藏超出容器宽度的复选框文本 */
  }
}

.filter-title {
  margin-top: 20px;
  margin-left: 20px;
  font-size: 16px;
  font-weight: bold;
}

.filter-footer-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;

  .filter-footer {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-bottom: 10px;
    padding-right: 20px;
  }
}
</style>
